<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/AdmSystem/AdmList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查看门店</el-breadcrumb-item>
    </el-breadcrumb>

    <el-tabs type="border-card">
      <el-tab-pane label="正在营业">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 正常营业
        </span>

        <el-table
          height="350px"
          size="middle"
          :data="shopsData1
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="151%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                v-if="btnState"
                size="small"
                type="danger"
                @click="inCloseShop(scope.row)"
                :plain="true"
              >冻结门店</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="pageData1.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData1.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData1.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="新增待审核">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 新增待审核
        </span>

        <el-table
          height="350px"
          size="middle"
          :data="shopsData2
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="151%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <template slot-scope="scope">
              <el-button size="small" type="success" plain @click="inAddShop(scope.row)">新增</el-button>
              <!-- <el-button
                size="small"
                type="danger"
                @click="cancelAddShop(scope.row)"
                :plain="true"
              >拒绝新增</el-button>-->
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="pageData2.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData2.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData2.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="关闭待审核">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 关闭待审核
        </span>

        <el-table
          height="350px"
          size="middle"
          :data="shopsData3
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="151%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                v-if="btnState"
                size="small"
                type="danger"
                @click="awaitClose(scope.row)"
                :plain="true"
              >关闭</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            :current-page="pageData3.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData3.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData3.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="解封待审核">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 解封待审核
        </span>

        <el-table
          height="350px"
          size="middle"
          :data="shopsData5
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="151%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <template slot-scope="scope">
              <el-button type="success" plain size="small" @click="awaitOpen(scope.row)">解封</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange5"
            @current-change="handleCurrentChange5"
            :current-page="pageData5.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData5.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData5.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已关闭门店">
        <span slot="label">
          <i class="el-icon-shopping-bag-1"></i> 已关闭门店
        </span>

        <el-table
          height="350px"
          size="middle"
          :data="shopsData4
          .filter(data => !search.searchValue || 
          data[search.searchType].toLowerCase().includes(search.searchValue.toLowerCase()) )"
          style="width: 100%"
        >
          <el-table-column label="门店编号" prop="_id" width="220%"></el-table-column>
          <el-table-column label="门店名字" prop="name"></el-table-column>
          <el-table-column label="门店地址" prop="address"></el-table-column>
          <el-table-column label="门店状态" prop="state"></el-table-column>
          <el-table-column label="所属店铺" prop="storesId.username"></el-table-column>
          <el-table-column align="right" width="151%">
            <template slot="header" slot-scope="scope" id="headerBox">
              <el-select v-model="search.searchType" size="small" width="100%">
                <el-option label="门店名字" value="name"></el-option>
                <el-option label="门店地址" value="address"></el-option>
              </el-select>

              <el-input
                v-model="search.searchValue"
                size="small"
                placeholder="输入关键字搜索"
                padding="0"
                width="100%"
              />
            </template>
            <!-- <template slot-scope="scope">
              <el-button
                v-if="btnState"
                size="small"
                type="danger"
                @click="againOpen(scope.row)"
                :plain="true"
              >解封门店</el-button>
            </template>-->
          </el-table-column>
        </el-table>

        <div class="block">
          <el-pagination
            background
            @size-change="handleSizeChange4"
            @current-change="handleCurrentChange4"
            :current-page="pageData4.currentPage"
            :page-sizes="[4,5,6,7]"
            :page-size="pageData4.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData4.shopsTotal"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from "axios";
import { createNamespacedHelpers } from "vuex";
const {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("shops");

export default {
  data() {
    return {
      addShopsData: {
        name: "",
        address: "",
        state: "待新增审核",
        storesId: ""
      },
      search: {
        searchType: "name",
        searchValue: ""
      },
      btnState: true
    };
  },
  computed: {
    ...mapState([
      "shopsData1",
      "shopsData2",
      "shopsData3",
      "shopsData4",
      "shopsData5",
      "pageData1",
      "pageData2",
      "pageData3",
      "pageData4",
      "pageData5",
      "dialogFormVisible",
      "updateData"
    ])
  },
  created() {
    this.getShopsData1Async();
    this.getShopsData2Async();
    this.getShopsData3Async();
    this.getShopsData4Async();
    this.getShopsData5Async();
  },
  methods: {

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    ...mapMutations(["close", "updateShops"]),
    ...mapActions([
      "getShopsData1Async",
      "getShopsData2Async",
      "getShopsData3Async",
      "getShopsData4Async",
      "getShopsData5Async",
      "handleSizeChange1",
      "handleCurrentChange1",
      "handleSizeChange2",
      "handleCurrentChange2",
      "handleSizeChange3",
      "handleCurrentChange3",
      "handleSizeChange4",
      "handleCurrentChange4",
      "handleSizeChange5",
      "handleCurrentChange5",
      "sure",
      "addShops",
      "closeShop",
      "cancelCloseShop",
      "cancelAddShop",
      "againOpen"
    ]),
    checkShops(row) {
      console.log(row);
      if (row.state == "正在营业") {
        this.$router.push(`/StoresSystem/GoodsList/${row._id}`);
      } else {
        this.$router.push("/StoresSystem/AwaitCheck");
      }
    },

    //直接关闭门店
    async inCloseShop(row) {
      // console.log(row)
      const shop = { ...row };
      shop.state = "已关闭";
      const { data } = await axios.post("/shops/updateShops", shop);
      //   console.log(data);
      if (data) {
        this.$message({
          message: "冻结成功！",
          type: "success"
        });
        this.getShopsData1Async();
        this.getShopsData2Async();
        this.getShopsData3Async();
        this.getShopsData4Async();
        this.getShopsData5Async();
      }
    },
    //新增审核通过
    async inAddShop(row) {
      //   console.log(row);
      const shop = { ...row };
      shop.state = "正在营业";
      const { data } = await axios.post("/shops/updateShops", shop);
      //   console.log(data);
      if (data) {
        this.$message({
          message: "新增审核已通过！",
          type: "success"
        });
        this.getShopsData1Async();
        this.getShopsData2Async();
        this.getShopsData3Async();
        this.getShopsData4Async();
        this.getShopsData5Async();
      }
    },
    //关闭待审核
    async awaitClose(row) {
      console.log(row);
      const shop = { ...row };
      shop.state = "已关闭";
      const { data } = await axios.post("/shops/updateShops", shop);
      if (data) {
        this.$message({
          message: "关闭审核已通过！",
          type: "success"
        });
        this.getShopsData1Async();
        this.getShopsData2Async();
        this.getShopsData3Async();
        this.getShopsData4Async();
        this.getShopsData5Async();
      }
    },
    //解封待审核
    async awaitOpen(row) {
      console.log(row);
      const shop = { ...row };
      shop.state = "正在营业";
      const { data } = await axios.post("/shops/updateShops", shop);
      if (data) {
        this.$message({
          message: "门店已解封！",
          type: "success"
        });
        this.getShopsData1Async();
        this.getShopsData2Async();
        this.getShopsData3Async();
        this.getShopsData4Async();
        this.getShopsData5Async();
      }
    },
  }
};
</script>



<style>
.addBtn {
  height: auto !important;
}
.el-breadcrumb {
  padding-left: 25px;
  height: 30px;
}
.el-tabs__nav-scroll {
  line-height: 40px;
}
.el-tabs__nav-scroll div {
  height: 100%;
}
.el-form.demo-addShopsData {
  width: 50%;
  height: 380px;
}
.el-form.demo-addShopsData .el-form-item:first-child {
  margin-top: 50px;
}

.el-table__header-wrapper .has-gutter tr th {
  line-height: 60px;
}
.has-gutter .cell {
  text-align: center;
  font-size: 14px;
}
.el-table__row .cell {
  text-align: center;
}
.is-right button {
  margin-right: 5px;
}
.el-dialog {
  width: 500px;
}
.el-form-item {
  padding: 0 40px;
}
.el-dialog__header {
  display: flex;
}
.el-dialog .el-input {
  width: 260px;
}
.el-dialog__close {
  display: none;
}
.dialog-footer {
  padding-right: 40px;
}

.el-pagination {
  margin-top: 10px;
  height: 30px !important;
}
.studentsImage {
  width: 50px;
}
</style>